<template>
    <!-- <navigator class="card" :url="props.movie.url || '/pages/detail/detail'">
        <img :src="props.movie.img" alt="" />
        <h3>
            <p>{{ props.movie.title }}</p>
        </h3>
    </navigator> -->
    <view>
        <navigator :url="props.movie.url || '/pages/detail/detail'">
            <img class="aspect-[3/4]" :src="props.movie.img" alt="" />
        </navigator>
        <view class="flex justify-between items-center p-2"
            ><text>{{ props.movie.title }}</text>
            <view @click="handleClickCollect" class="flex items-center"
                ><image class="w-4 h-4" :src="iconUrl" mode="aspectFit" /></view
        ></view>
    </view>
</template>

<script setup lang="ts">
import { useUserStore } from "@/stores/user";

interface MovieCardProps {
    movie: {
        id: string;
        url: string;
        title: string;
        img: string;
    };
    isCollected: boolean;
}

const props = withDefaults(defineProps<MovieCardProps>(), {
    movie: () => ({
        id: "1",
        url: "/pages/detail/detail",
        title: "Let the Bullets Fly",
        img: "images/m1.jpg"
    }),
    isCollected: false
});

const emit = defineEmits(["collect"]);

const collectStatus = ref(props.isCollected);

const iconUrl = computed(() => (collectStatus.value ? "/static/icon/heart_fill.svg" : "/static/icon/heart.svg"));

const userStore = useUserStore();

const handleClickCollect = () => {
    if (!userStore.isLogin) {
        uni.showToast({ title: "请先登录", icon: "none" });
        return;
    }
    collectStatus.value = !collectStatus.value;
    emit("collect", collectStatus.value, props.movie);
};
</script>

<style scoped lang="scss">
.card {
    // border-radius: 10px;
    // overflow: hidden;
    aspect-ratio: 3/4;
    position: relative;
    box-shadow: 0px 0px 10px 15px rgba(0, 0, 0, 0.197);
    img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: -1;
        transition: all 0.3s linear;
    }
    h3 {
        display: none;
        position: absolute;
        inset: 0;
        z-index: 9;
        display: flex;
        align-items: flex-end;
        font-size: 1.8rem;
        padding: 30px 40px;
        font-weight: bold;
        color: #fff;
        background-image: linear-gradient(transparent 0%, rgb(161, 57, 11) 100%);
        opacity: 0;
        transition: all 0.3s ease-in-out;

        p {
            // width: 80%;
            line-height: 1.5;
            transform: translateY(50%);
            transition: all 0.3s ease-in-out;
        }
    }
    &:hover {
        h3 {
            opacity: 1;
            p {
                transform: translateY(0);
            }
        }
        img {
            transform: scale(1.05);
        }
    }
}
</style>
